<template>
  <a-form :model="form"
          ref="ruleForm"
          v-bind="layout">
    <a-form-item label="计划日期"
                 v-bind="validateInfos.date"
                 ref="date">
      <a-date-picker valueFormat="YYYY-MM-DD HH:MM:ss"
                     v-model:value="form.date"
                     show-time
                     type="date"
                     placeholder="请选择计划日期"
                     style="width: 100%;" />
    </a-form-item>
    <a-form-item label="耗时"
                 v-bind="validateInfos.time"
                 required>
      <a-input-number v-model:value="form.time"
                      :min="1"
                      :max="10"
                      placeholder="请选择耗时"
                      style="width: 100%;"></a-input-number>
    </a-form-item>
    <a-form-item label="备注"
                 v-bind="validateInfos.content"
                 required>
      <a-textarea v-model:value="form.content"
                  placeholder="请输入备注"
                  :rows="4"
                  style="width: 100%;" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary"
                @click="onSubmit">
        创建任务
      </a-button>
      <a-button @click="onCreal"
                style="margin-left: 10px;">
        重置
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
  import { reactive, toRefs, ref, toRaw, defineComponent } from "vue";
  import { useForm } from "@ant-design-vue/use";
  import moment, { Moment } from "moment";
  import { rulesAddTimeFrom } from "../config";
  import { IState, From } from "../plan.types";
  export default defineComponent({
    setup(props, context) {
      const state = reactive<IState>({
        form: {
          date: moment(Date.now()).format("YYYY-MM-DD HH:MM:ss"),
          time: 1,
          content: "",
        },
        layout: {
          labelCol: {
            span: 4,
          },
          wrapperCol: {
            span: 14,
          },
        },
      });
      const { resetFields, validate, validateInfos } = useForm(
        state.form,
        reactive(rulesAddTimeFrom)
      );
      const onSubmit = (e: Event) => {
        e.preventDefault();
        validate().then((res: From) => {
          const params = toRaw(state.form);
          context.emit("handlePlan", params);
          onCreal();
        });
      };
      const onCreal = () => {
        resetFields();
      };
      return {
        ...toRefs(state),
        onSubmit,
        onCreal,
        validateInfos,
      };
    },
  });
</script>
